<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS box shadow examples</title>
    <style>
    html {
      font-family: sans-serif;
    }

    p {
      margin: 0;
    }

    article {
      max-width: 500px;
      padding: 10px;
      background-color: red;
      background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
    }  

    .simple {
      box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
    }

    .multiple {
      box-shadow: 1px 1px 1px black,
                  2px 2px 1px black,
                  3px 3px 1px red,
                  4px 4px 1px red,
                  5px 5px 1px black,
                  6px 6px 1px black;
    }  

    button {
      width: 150px;
      font-size: 1.1rem;
      line-height: 2;
      border-radius: 10px;
      border: none;
      background-image: linear-gradient(to bottom right, #777, #ddd);
      box-shadow: 1px 1px 1px black,
                  inset 2px 3px 5px rgba(0,0,0,0.3),
                  inset -2px -3px 5px rgba(255,255,255,0.5);
    }

    button:focus, button:hover {
      background-image: linear-gradient(to bottom right, #888, #eee);
    }

    button:active {
      box-shadow: inset 2px 2px 1px black,
                  inset 2px 3px 5px rgba(0,0,0,0.3),
                  inset -2px -3px 5px rgba(255,255,255,0.5);
    }
    </style>
  </head>
  <body>
    <h2 id="basic">Basic box shadow example</h2>

    <article class="simple">
      <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p>
    </article>
    
    <h2 id="multiple">Multiple box shadows example</h2>

    <article class="multiple">
      <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p>
    </article>

    <h2 id="inner">Inner shadows example</h2>

    <button>Press me!</button>
  </body>
</html>